/**
 * @class
 * @description Loadingmask object to control a loadingmask
 */
loadingmask = (function() {
    /**
     * @class Loadingmask - Create Loadingmask object, that provide functionality for a loadingmask	
     * @private
     */		
	var Loadingmask = function() {
		this.loadingmaskId = "loading";
		this.messageId = null;
		this.progressId = null;
		this.progressMode = 'numberof';
	};
	
    /**
     * sets the loadingmask css classname
     * @param cls - string this css classname
     */			
	Loadingmask.prototype.setLoadingmaskId = function (id) {
		this.loadingmaskId = id;	
	};

	Loadingmask.prototype.getStyle = function (el, styleProp) {
		if (el.currentStyle)
			var y = el.currentStyle[styleProp];
		else if (window.getComputedStyle)
			var y = document.defaultView.getComputedStyle(el, null).getPropertyValue(styleProp);
		return y;
	}
	
	
    /**
     * sets the config for the loadingmasl class
     * @param config - property map with...
     * 				 - messageId: element id where messages are populated
     *               - progressId: element id where the progress message populated or the progressbar appears
     *               - progressMode: enum [numberof] index and length are shown 
     *               -                 or [progressbar] a progressbar is shown
     */			
	Loadingmask.prototype.setConfig = function (config) {
		if (config.loadingmaskId)
			this.loadingmaskId = config.loadingmaskId;
		
		if (config.messageId)
			this.messageId    = config.messageId;
		
		if (config.progressId)
			this.progressId   = config.progressId;
		
		if (config.progressMode)
			this.progressMode = config.progressMode;
		
		tactile.EventManager.addListener(this.messageId, "tap", (function() {
			var item = document.getElementById(this.messageId);
			var style = this.getStyle(item, "color");
			if (style == "rgb(255, 255, 255)")
				item.style.color = "rgb(100, 100, 100)";
			else
				item.style.color = "rgb(255, 255, 255)";
		}).bind(this));
	};
	
    /**
     * shows the loadingmask
     */		
	Loadingmask.prototype.show = function () {
		document.getElementById(this.loadingmaskId).style.visibility = "visible";
		document.getElementById(this.loadingmaskId).style.zIndex = "1000";
	};

	/**
     * hides the loadingmask
     */		
	Loadingmask.prototype.hide = function () {
		document.getElementById(this.loadingmaskId).style.visibility = "hidden";
		document.getElementById(this.loadingmaskId).style.zIndex = "0";
	};

	/**
     * set the state of the loadingmask
     * @param config - property map with the loadingmask state...
     *               - step: current step (int)
     *               - steps: max steps (int)
     *               - message: informative text added to the message area of the loadingmask (string)
     */		
	Loadingmask.prototype.setState = function (state) {
		if (this.progressId && this.progressMode == 'numberof') 
			document.querySelector('#'+this.progressId+' div div').innerHTML = state.step + "/" + state.steps;
		
		if (this.progressId && this.progressMode == 'progressbar') {
			with (document.querySelector('#'+this.progressId+' div div')) {
				innerHTML = "";
				style.width = ((100 / state.steps) * state.step) + "%";
			}			
		}
			
		if (this.messageId) {
			var before = document.querySelector('#'+this.messageId+' div div').innerHTML;
			document.querySelector('#'+this.messageId+' div div').innerHTML = before + state.message + "<br/>";			
		}
	};
    
    return new Loadingmask();
})();